<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证邮箱唯一性</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .current {
            color: red;
        }
        
        .current2 {
            color: green;
        }
    </style>
</head>

<body>
    <input type="text">
    <span>请输入邮箱地址</span>
    <script>
        var input = document.querySelector('input');
        var span = document.querySelector('span');
        input.onblur = function() {
            var email = this.value;
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]+[A-Za-z\d]{2,4})$/;
            if (!reg.test(email)) {
                span.innerHTML = '请输入符合规则的邮箱地址！';
                span.className = 'current';
                return; //阻止程序向下执行
            } else {
                $.ajax({
                    type: 'get',
                    url: 'http://127.0.0.1:8000/email',
                    data: {
                        email: email
                    },
                    dataType: 'json',
                    success: function(res) {
                        span.innerHTML = res.msg;
                        span.className = 'current';
                    },
                    error: function(err) {
                        span.innerHTML = err.info;
                        span.className = 'current2';
                    }
                })
            }
        }
    </script>
</body>

</html>